<template>
	<view>
		<gui-modal :customClass="['gui-bg-white', 'gui-dark-bg-level-3', 'gui-border-radius']" ref="modal"
			:title="title">
			<template v-slot:content>
				<slot name="content"></slot>
			</template>

			<!-- 利用 flex 布局 可以放置多个自定义按钮哦  -->
			<template v-slot:btns>
				<slot name="btns">
					<view class="gui-flex gui-row gui-space-between gui-padding">
						<view hover-class="gui-tap" class="gui-text-center gui-flex1" style="margin-right:80rpx;">
							<text class="modal-btns gui-color-gray" @tap="close">取消</text>
						</view>
						<view hover-class="gui-tap" class="gui-text-center gui-flex1" style="margin-left:80rpx;">
							<text class="modal-btns gui-primary-color" @tap="confirm">确认</text>
						</view>
					</view>
				</slot>
			</template>
		</gui-modal>
	</view>
</template>

<script>
	export default {
		name: "hyb-dialog",

		props: {
			title: {
				type: String,
				default: ""
			}
		},
		data() {
			return {
				data: null
			};
		},
		methods: {
			open(data) {
				if (data) this.data = data
				this.$refs.modal.open()
			},
			close() {
				this.$refs.modal.close()
			},
			confirm() {
				this.$emit('confirm', this.data)
			}
		}
	}
</script>

<style>

</style>